<template>
  <cube-scroll
    ref="scroll"
    :data="data"
    :options="options"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp"
  >
    <Pad>
      <News v-for="news in data" :key="news.id" :news="news" />
    </Pad>
  </cube-scroll>
</template>

<script>
import Pad from "@/components/pad";
import News from "@/components/news";
import { newsList } from "@/api/news";
export default {
  data() {
    return {
      queryParams: {
        type: 1,
        current: 1,
        size: 10
      },
      data: [],
      options: {
        // pullDownRefresh: true,
        pullUpLoad: true
      }
    };
  },
  components: {
    News,
    Pad,
  },
  created() {
    this.initList();
  },
  methods: {
    initList() {
      Promise.all([this.getList(), this.getBloodStationList()]).then(res => {
        this.data = [...res[1].data.records, ...res[0].data.records];
        this.options.pullUpLoad = true;
      });
    },
    // 获取平台资讯
    getList() {
      return newsList(this.queryParams);
    },
    // 获取浆站资讯
    getBloodStationList() {
      return newsList({
        type: 2,
        current: 1,
        size: 2
      });
    },
    onPullingDown() {
      console.log("下拉刷新");
      this.queryParams.current = 1;
      this.initList();
    },
    onPullingUp() {
      console.log("上拉加载");
      this.queryParams.current += 1;
      this.getList().then(({ data }) => {
        this.data = [...this.data, ...data.records];
        this.$refs.scroll.forceUpdate(false, true);
        // 已经没有更多页
        if (data.current >= data.pages) {
          this.options.pullUpLoad = false;
          this.$refs.scroll.refresh();
        }
      });
    }
  }
};
</script>

<style lang='scss'>
</style>
